<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="list">
      <el-table-column label="任务类型" align="center" prop="type">
        <template slot-scope="scope">
          {{ scope.row.type == 2 ? '处置任务' : '演练任务' }}
        </template>
      </el-table-column>
      <el-table-column label="事件标题" align="center" prop="infoTitle">
      </el-table-column>
      <el-table-column label="指派人" align="center" prop="createUserName">
      </el-table-column>
      <el-table-column label="任务内容" align="center" prop="taskContent">
      </el-table-column>
      <el-table-column label="任务时间" align="center" prop="createTime" width="180">
      </el-table-column>
      <el-table-column label="任务状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" size="mini">未完成</el-tag>
          <el-tag type="success" v-if="scope.row.status == 2" size="mini">已完成</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 3" size="mini">已终止</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleExecuteTask(scope.row)" v-if="scope.row.status == 1">去完成
          </el-button>
          <el-button size="mini" type="text" @click="handleTaskDetail(scope.row)" v-if="scope.row.status != 1">任务详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <task-execute ref="taskExecute" @handleOk="onTaskExecuted" />
    <task-detail ref="taskDetail" />
  </div>
</template>

<script>
import TaskExecute from './components/TaskExecute.vue';
import TaskDetail from "./components/TaskDetail.vue";
import * as HandleApi from "@/api/response/handle.js";

export default {
  name: 'MyTask',
  components: {
    TaskExecute, TaskDetail
  },
  data() {
    return {
      //loading
      loading: false,
      // 总条数
      total: 20,
      //表格数据
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      timer: null
    };
  },
  mounted() {
    this.getList();
    if (this.timer == null && this.$store.state.settings.cronTabStart) {
      this.timer = setInterval(() => {
        this.getList();
      }, 5000);
    }
  },
  methods: {
    handleExecuteTask(data) {
      this.$refs.taskExecute.showDialog(data);
    },
    handleTaskDetail(data) {
      this.$refs.taskDetail.showDialog(data.taskId);
    },
    onTaskExecuted() {
      this.getList();
    },
    getList() {
      HandleApi.handleTaskList(this.queryParams).then(res => {
        this.list = res.rows;
        this.total = res.total;
      })
    }
  },
};
</script>
<style scoped lang="scss">
.ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.el-popover {
  height: 150px;
  overflow: auto;
}
</style>
